<template>
    <div id='question2' >
        <div class='test_bt_zhe' v-if='showTitle' style=' -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
            <span>{{data.questionTypes}}({{data.typesIntro}})</span>
        </div>
        <div class='test_controls' style=' -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
            <ul>
                <li>
                    <span>第 {{testNum+1}} 题</span>
                </li>
                <li>
                    <span class='maxTg mmTg' @click='maxTgTop' v-if='maxOrMin'>放大窗口</span>
                    <span class='minTg mmTg' @click='minTgTop' v-if='!maxOrMin'>恢复窗口</span>
                </li>
                <li>
                    <span class='clearTg' @mousedown='clickUnMake'>取消标记</span>
                </li>
                <li>
                    <span class='markTg' @mousedown='clickMake'>标记文字</span>
                </li>
                <li @click='showTItle' :class="!showTitle?'hiddenTitle':''"></li>
            </ul>
        </div>
        <div @mousemove="moveStem($event)" class='test_stem' ref='stem' :style="{height:stemHeight,cursor:cur?'s-resize':'default','user-select':userSelect?'none':'text'}" 
        >
            <span>
                <div v-html='data.data[testNum].title'></div>
                <span style='font-weight:bold;'>要求：</span>
            </span>
        </div>
        <div class='test_answer_controls' style=' -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
            <div class='tools'>
                <ul>
                    <li><span class='copy' @click='copyContent'>复制</span></li>
                    <li><span class='cut' @click="cutContent">剪切</span></li>
                    <li><span class='paste' @click="pasteContent">粘贴</span></li>
                    <li>
                        <span class='symbols' @click='clickSymbols'>公式和符号</span>
                        <div class='gs' @mouseleave="mouseCloseSyem" v-if='symbolShow'>
                            <div class="arrow"></div>
                            <div class="gs_tit">
                                <ul>
                                    <li v-for='(item,index) in liBtn' 
                                    :key='index' id="twoo1" 
                                    :class="liactive == index?'li_active_btn':''" style="float:left;" >
                                        <input 
                                        @click='clickSysHandle(index)'
                                        class="gs_an gs_btn" 
                                        type="button" :value="item">
                                    </li>
                                </ul>
                            </div>
                            <div class='gs_nr'>
                                <ul v-show='liactive == 0'>
                                    <li v-for='(item,index) in 13' :key='index' @click="addFraction(0,index)"
                                    :style="{backgroundPosition:index<9?index*-34+'px -136px':(index-9)*-34+'px -170px'}"></li>
                                </ul>
                                <ul v-show='liactive == 1'>
                                    <li v-for='(item,index) in 19' :key='item' @click="addFraction(1,index)"
                                    :style="{backgroundPosition:index<9?index*-34+'px 0px':index<18 && index>8?(index-9)*-34+'px -34px':(index-16)*-34+'px -102px'}"></li>
                                </ul>
                                <ul v-show='liactive == 2'>
                                    <li v-for='(item,index) in 11' :key='item' @click="addFraction(2,index)"
                                    :style="{backgroundPosition:index<9?index*-34+'px -68px':(index-9)*-34+'px -102px'}"></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><span class='cal' @click='showCal'>计算器</span></li>
                    <li>
                        <span class='maxTg mmTg' v-if='maxOrMin' @click='maxTgTBot'>放大窗口</span>
                        <span class='minTg mmTg' v-if='!maxOrMin' @click='minTgTop'>恢复窗口</span>
                    </li>
                    <li><span class='help' @click='showDialogs'>帮助</span></li>
                </ul>
            </div>
            <div class='ask'>
                <ul>
                    <li v-for='(item,index) in data.data[testNum].children' :key='index' @click='clickLiHandle(index)' 
                        :class="index == activeIndex ? 'activeLi': ''"
                    >
                        要求({{index+1}})
                    </li>
                </ul>
            </div>
        </div>
        <div class='test_answer' :style='{height:answerHeight}'>
            <ul style='padding-left:0;'>
                <template v-for='(item,index) in data.data[testNum].children'>
                    <li  :key='index' 
                v-if="activeIndex == index">
                    <span class='contentSpan' v-html='item.title'></span>
                    <span class='span'>请在下方答题区域内作答。</span>
                </li>
                </template>
            </ul>
            <div class='test_area'>
                <template v-for='(item,index) in data.data[testNum].children'>
                    <div v-html='item.answer'  @blur='getAnswer($event,index,item)'  ref="txtAreaContent"  class="txtArea" contenteditable="true" :key='index' @click="getRange" v-show="activeIndex == index"></div>
                    <!-- <textarea name="" @click="getRange" :key='index' id="" style='resize:none' v-if="activeIndex == index" v-model="answer[index]"></textarea> -->
                </template>
            </div>
        </div>
        <div class='helpDialog' v-if='showDialog' v-drag>
            <div id="popup_drag" style="width:687px;height: 28px; line-height:28px; font-size:14px;background:#2b94f0;cursor:move">
                <span id="popup_exit" style="float:right;margin-right:10px;cursor:pointer" @click='closeDialog'>关闭</span>  	
            </div>
            <div id="gsHelpDiv" style="width:687px;height:500px; overflow:auto;background:#fff;">
                <img width="670" src="../../assets/images/1.jpg"><br/>
                <img width="670" src="../../assets/images/2.jpg"><br/>
                <img width="670" src="../../assets/images/3.jpg"><br/>
                <img width="670" src="../../assets/images/4.jpg"><br/>
                <img width="670" src="../../assets/images/5.jpg"><br/>
                <img width="670" src="../../assets/images/6.jpg">
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'Question2',
    data(){
        return{
            showTitle:true,//显示题干
            stemHeight:'',//题干部分高度
            answerHeight:'',//答案部分高度
            activeIndex:0,//选中项
            maxOrMin:true,//放大或者恢复窗口
            showDialog:false,
            cur:false,
            userSelect:false,
            liactive:0,
            symbolShow:false,
            liBtn:['常用公式','数学符号','希腊字母'],
        }
    },
    props:['type','testNum','questionHeight','data'],
    created(){
        this.stemHeight = this.questionHeight*0.4+'px';
        this.answerHeight = this.questionHeight*0.28+'px';
    },
    mounted(){
        this.MQ = MathQuill.getInterface(2);
    },
    methods:{
        getAnswer(e,index,item){
            let answer = {
                answers:[],
                questionId:item.questionId
            }
            let html = e.target.innerHTML;
            if(html == '<p><br></p>' || !html || html == item.template){
                answer.answers.length = 0
            }else{
                this.$emit('setSign','1');
                answer.answers.push(html)
            }
            this.$emit('getAnswer',answer);
            this.$emit('setAnswer',JSON.stringify({item:html,index:index}))
        },
        pasteContent(){//粘贴
            let txt = document.createElement("text");
            if(this.copyTxtContent == ''){
                this.$message("请先复制文本");
                return;
            }else if (this.range == null) {
                this.$message("请选取插入地点");
                return;
            }
            txt.innerHTML = this.copyTxtContent;
            this.range.insertNode(txt);
        },
        copyContent(){//复制
           this.copyTxtContent=window.getSelection().toString()
        },
        cutContent(){//剪切
            this.copyTxtContent=window.getSelection().toString()
        },
        addFraction(a,b) {//插入公式符号
            let latex = '';//哪种符号公式
            if(a==0){
                switch(b){
                    case 0:
                        latex='\\frac{}{}';
                        break;
                    case 1:
                        latex='\\^{}/_{}';
                        break;
                    case 2:
                        latex='x^{}';
                        break;
                    case 3:
                        latex='x_{}';
                        break;
                    case 4:
                        latex='x_{}^{}';
                        break;
                    case 5:
                        latex='\\bar{}';
                        break;
                    case 6:
                        latex='\\sqrt{}';
                        break;
                    case 7:
                        latex='\\nthroot3{}';
                        break;
                    case 8:
                        latex="\\nthroot{}{}";
                        break;
                    case 9:
                        latex='\\sum^{}_{}';//根号
                        break;
                    case 10:
                        latex='\\sum0';
                        break;
                    case 11:
                        latex="\\log_{}\\left(\\right)";
                        break;
                    case 12:
                        latex='\\ln{}';
                        break;
             
                }
            }else if(a==1){
                switch(b){
                    case 0:
                        latex='+';
                        break;
                    case 1:
                        latex='-';
                        break;
                    case 2:
                        latex='\\pm';
                        break;
                    case 3:
                        latex='\\times';
                        break;
                    case 4:
                        latex='\\ast';
                        break;
                    case 5:
                        latex='\\div';
                        break;
                    case 6:
                        latex='/';
                        break;
                    case 7:
                        latex='\\infty';
                        break;
                    case 8:
                        latex="\\partial";
                        break;
                    case 9:
                        latex='\\bigtriangleup';//根号
                        break;
                    case 10:
                        latex='=';
                        break;
                    case 11:
                        latex="\\ne";
                        break;
                    case 12:
                        latex='\\approx';
                        break;
                     case 13:
                        latex='>';
                        break;
                    case 14:
                        latex="<";
                        break;
                    case 15:
                        latex='\\ge';
                        break;
                    case 16:
                        latex='\\le';
                        break;
                    case 17:
                        latex='%';
                        break;
                    case 18:
                        latex='‰';
                        break;
                }

            }else if(a==2){
                 switch(b){
                    case 0:
                        latex='\\alpha';
                        break;
                    case 1:
                        latex='\\beta';
                        break;
                    case 2:
                        latex='\\gamma';
                        break;
                    case 3:
                        latex='\\delta';
                        break;
                    case 4:
                        latex='\\varepsilon';
                        break;
                    case 5:
                        latex='\\varphi';
                        break;
                    case 6:
                        latex='\\lambda';
                        break;
                    case 7:
                        latex='\\mu';
                        break;
                    case 8:
                        latex="\\rho";
                        break;
                    case 9:
                        latex='\\sigma';//根号
                        break;
                    case 10:
                        latex='\\omega';
                        break;
                }

            }
            if (this.range == null) {
                this.$message("请选取插入地点");
                return;
            }
            let itemBox = document.createElement("text");
            var text = document.createElement("text");
            text.style="min-width:20px;min-height:30px;"
            var mathField = this.MQ.MathField(text, []);
            mathField.latex(latex); // Renders the given LaTeX in the MathQuill field
            mathField.latex();
            itemBox.append(text);
            itemBox.innerHTML += "&nbsp;";
            this.range.insertNode(itemBox); //在焦点插入节点
        },
        getRange() {//找到焦点
            this.range = window.getSelection().getRangeAt(0); //找到焦点位置
        },
        //点击出现公式
        clickSymbols(){
            this.symbolShow = true
        },
        //划走时公式版消失
        mouseCloseSyem(){
            this.symbolShow = false
        },
        //点击切换公式，字符
        clickSysHandle(index){
            this.liactive = index;
        },
        //是否显示题干
        showTItle(){
            this.showTitle = !this.showTitle
        },
        leaveStem(e){
            // console.log(e)
        },
        //切换要求按钮
        clickLiHandle(index){
            this.activeIndex = index;
        },
        //上面部分放大窗口
        maxTgTop(){
            this.maxOrMin = false;
            this.stemHeight = this.questionHeight+'px';
        },
        //缩小窗口
        minTgTop(){
            this.maxOrMin = true;
            this.stemHeight = this.questionHeight*0.4+'px';
            this.answerHeight = this.questionHeight*0.28+'px';
        },
        //下面部分放大窗口
        maxTgTBot(){
            this.maxOrMin = false;
            this.stemHeight = this.questionHeight*0.005+'px';
            this.answerHeight = this.questionHeight*0.623+'px';
        },
        //选中标记和取消标记
        makeColor(colour){
            if (window.getSelection) {
                // IE9 and non-IE
                try {
                    if (!document.execCommand("BackColor", false, colour)) {
                        this.makeEditableAndHighlight(colour);
                    }
                } catch (ex) {
                    this.makeEditableAndHighlight(colour);
                }
            } else if (document.selection && document.selection.createRange) {
                // IE <= 8 case
                range = document.selection.createRange();
                range.execCommand("BackColor", false, colour);
            }
        },
        makeEditableAndHighlight(colour){
            var range, sel = window.getSelection();
            if (sel.rangeCount && sel.getRangeAt) {
                range = sel.getRangeAt(0);
            }
            document.designMode = "on";
            if (range) {
                sel.removeAllRanges();
                sel.addRange(range);
            }
            document.execCommand("BackColor", false, colour);
            if (!document.execCommand("HiliteColor", false, colour)) {
                console.log('color')
                document.execCommand("BackColor", false, colour);
            }
            document.designMode = "off";
        },
        clickMake(){
            this.makeColor('yellow')
        },
        clickUnMake(){
            this.makeColor('white')
        },
        //显示帮助模板层
        showDialogs(){
            this.showDialog = true;
        },
        //关闭帮助模板层
        closeDialog(){
            this.showDialog = false
        },
        //上下拉动
        moveStem(e){
            // let height = this.$refs.stem.style.height.split('p')[0]
            // console.log(height);
            // console.log(e.offsetY,'Y')
            // if(this.showTitle){
            //     height = parseInt(this.stemHeight.split('p')[0])+20+66+20;
            // }else{
            //     height = parseInt(this.stemHeight.split('p')[0])+20+20;
            // }
            let height = parseInt(this.stemHeight.split('p')[0])+20
            if(e.offsetY > height-2 && e.offsetY < height+5){
                // console.log('cur');
                this.cur = true;
                this.$refs.stem.onmousedown = this.mouseDownStemHandle
            }else{
                this.cur = false;
                this.$refs.stem.onmousedown = null;
            }
        },
        mouseDownStemHandle(e){
            this.userSelect = true;
            document.addEventListener('mousemove',this.mouseMove);
            document.addEventListener('mouseup',this.mouseUp);
        }, 
        mouseMove(e){
            if(e.offsetY<20) {
                // console.log('1-2')
                this.$refs.stem.onmousedown = null;
                document.removeEventListener('mousemove',this.mouseMove);
                return;
            };
            this.stemHeight = e.offsetY+'px';
            this.answerHeight = (this.questionHeight*0.628 - e.offsetY)+'px';
        },
        mouseUp(e){
            // console.log('remove')
            this.userSelect = false;
            document.removeEventListener('mousedown',this.mouseDownStemHandle);
            // console.log(document)
            document.removeEventListener('mousemove',this.mouseMove);
            document.removeEventListener('mouseup',this.mouseUp);
        },
        //复制
        clickCopy(){
            let g = window.getSelection().toString();
            console.log(g)
        },
        //计算器
        showCal(){
            try {
            var objShell = new ActiveXObject("wscript.shell");
            objShell.Run("calc");
            objShell = null;
            }
            catch (e){
            alert('不能正确打开计算器，请自行启动系统计算器')
            }
      },
    },
    watch:{
        data:{
            handler(val,oldVal){
                if(val.data[this.testNum].questionId !== oldVal.data[this.testNum].questionId){
                    this.activeIndex = 0;
                }
            },
            deep:true
        },
        testNum(val,oldVal){
            this.activeIndex = 0;
        }
    },
    directives:{
        drag:{
            bind(el){
                el.onmousedown =function(e){
                    if(e.target.id !== 'popup_drag') return;
                    var x = e.clientX - el.offsetLeft;
                    var y = e.clientY - el.offsetTop;
                    document.onmousemove = function(e){
                        el.style.left = e.clientX - x + 'px';
                        el.style.top = e.clientY - y +'px';
                    }
                    document.onmouseup = function(){
                        document.onmousemove = document.onmousedown = null;
                    } 
                    e.preventDefault();
                }
            }
        }
    },
}
</script>

<style lang="scss" >
    #question2{
       height:100%;
       margin:1px;
       overflow: auto;
    //    display:flex;
    //    flex-direction:column;
       color:#000;
       .test_bt_zhe{
            font-weight: normal;
            color: #333333;
            font-size: 12pt;
            line-height: 1.5;
            padding-left: 20px;
            margin: 0px;
            text-align: left;
            font-family: '黑体';
            span{
                display:inline-block;
                line-height:25pt;
                margin:0 0 0 24pt;
                text-indent:-24pt;
            }
       }
       .test_controls{
            font-size: 12px;
            font-weight: bolder;
            padding-left: 2px;
            line-height: 20px;
            height: 20px;
            border-bottom: 1px solid #9fb7f7;
            border-top: 1px solid #9fb7f7;
            ul{
                height:100%;
                overflow:hidden;
                padding-right:20px;
                padding-left:40px;
                font-weight: normal;
                li{
                    cursor: pointer;
                    float: right;
                    span{
                        font-weight: normal;
                        font-size: 12px;
                        color: #000;
                        text-decoration: none;
                        padding-left: 20px;
                        display: block;
                        z-index: 1;
                        margin-right: 8px;
                        font-family: '宋体';
                    }
                    &:nth-child(1){
                        float:left;
                        font-family: '黑体';
                        font-size: 14px!important;
                        font-weight: normal;
                        height: 14px;
                        span{
                            font-family: '黑体';
                            font-size: 14px;
                            font-weight: normal;
                            padding-left:0;
                        }
                    }
                    &:nth-last-child(1){
                        width: 94px;
                        height:15px;
                        background: url('../../assets/images/sqtx.gif')
                    }
                    
                    .markTg{
                        background: url(../../assets/images/zht_06.gif) 0px 4px no-repeat;
                    }
                    .clearTg{
                        background: url(../../assets/images/zht_08.gif) 0px 4px no-repeat;
                    }
                    .maxTg{
                        background: url(../../assets/images/max.png)  no-repeat;
                    }
                    .minTg{
                        background: url(../../assets/images/min.png)  no-repeat;
                    }
                }
                .hiddenTitle{
                    background: url('../../assets/images/zktx.gif')!important;
                }
            }
       }
       .test_stem{
            text-align: left;
            border-bottom: 6px solid #9fb7f7;
            background-color: #FFF;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px 20px;
            z-index: 999;
            cursor: default;
            box-sizing: content-box;
            p{
                margin: 5px;
            }
       }
       .test_answer_controls{
           width:100%;
           background:url('../../assets/images/zht_01.gif') repeat-x;
            // background:#f00;
           height: 25px;
        //    overflow: hidden;
           .tools{
               float:right;
               padding-right: 20px;
               height:100%;
               width:50%;
               ul{
                   height:100%;
                   float: right;
                   li{
                       float:left;
                       height:100%;
                       position: relative;
                       cursor:pointer;
                       span{
                            height:100%;
                            font-weight: normal;
                            font-size: 12px;
                            color: #000;
                            line-height: 2;
                            text-decoration: none;
                            padding-left: 20px;
                            display: block;
                            z-index: 1;
                            margin-right:10px;
                       }
                       .copy{
                           background:url('../../assets/images/zht_14.gif') 0px no-repeat;
                       }
                       .cut{
                           background:url('../../assets/images/zht_22.gif') 0px no-repeat;
                       }
                       .paste{
                           background:url('../../assets/images/zht_24.gif') 0px no-repeat;
                       }
                       .symbols{
                           background:url('../../assets/images/zht_26.gif') 0px no-repeat;
                       }
                       .cal{
                           background:url('../../assets/images/ico_cal.png') 0px no-repeat;
                       }
                       .help{
                           padding-left:30px;
                           background:url('../../assets/images/zht_07.gif') 0px 2px no-repeat;
                       }
                       .maxTg{
                           background:url('../../assets/images/max.png') 0px no-repeat;
                       }
                       .minTg{
                           background:url('../../assets/images/min.png') 0px no-repeat;
                       }
                       .gs{
                           position: absolute;
                           border-bottom: #c1cee3 1px solid;
                           right: -120px;
                           top: 20px;
                           width: 328px;
                           z-index: 4000;
                           .arrow{
                               margin: 0 auto;
                                margin-top: 5px;
                                display: block;
                                width: 15px;
                                height: 8px;
                                background: url('../../assets/images/arraw.gif') no-repeat;
                           }
                            .gs_tit{
                                height: 22px;
                                line-height: 22px;
                                border-right: #c1cee3 1px solid;
                                background: url(../../assets/images/gs_tit.gif) repeat-x;
                                margin: 0px;
                                border-left: #c1cee3 1px solid;
                                border-top: #c1cee3 1px solid;
                                // width: 326px;
                                ul{
                                    padding-left:0;
                                    margin: 0;
                                    li{
                                        cursor: pointer;
                                        font-size: 14px;
                                        // padding-top: 3px;
                                        height: 22px;
                                        float: left;
                                        font-weight: bold;
                                        text-align: center;
                                        margin-left: 10px;
                                        line-height: 22px;
                                        width: 93px;
                                        input{
                                            padding: 0px;
                                            margin: 0px;
                                            
                                            background: none transparent scroll repeat 0% 0%;
                                        }
                                        .gs_btn{
                                            width:100%;
                                            height:100%;
                                            border:none;
                                            outline: none;
                                            cursor:pointer;
                                        }
                                        
                                    }
                                    .li_active_btn{
                                            height: 22px;
                                            line-height: 22px;
                                            color: #ef8324;
                                            background: url(../../assets/images/tab_zh_gs.png) no-repeat;
                                            width: 93px;
                                        }
                                }
                            }
                            .gs_nr{
                                overflow: hidden;
                                border-right: #c1cee3 1px solid;
                                padding-bottom: 10px;
                                padding-top: 10px;
                                padding-left: 10px;
                                border-left: #c1cee3 1px solid;
                                padding-right: 0px;
                                // width: 316px;
                                background-color: #FFF;
                                clear: both;
                                ul{
                                    margin:0;
                                    padding-left:0;
                                    li{
                                        cursor: pointer;
                                        border-top: #ccc 1px solid;
                                        height: 30px;
                                        border-right: #ccc 1px solid;
                                        background: url(../../assets/images/math.png) no-repeat;
                                        border-bottom: #ccc 1px solid;
                                        float: left;
                                        margin: 0px 6px 6px 0px;
                                        border-left: #ccc 1px solid;
                                        width: 30px;
                                        text-indent: -9999px;
                                    }
                                }
                            }
                       }
                   }
               }
           }
           .ask{
               height:100%;
               float:left;
               width:50%;
               ul{
                   height:100%;
                   overflow-x: auto;
                   width:100%;
                   font-size: 12px;
                    font-weight: bolder;
                    padding-left: 2px;
                    line-height: 20px;
                   li{
                       float:left;
                       background: url('../../assets/images/tab_zh1.png') no-repeat; 
                        width: 66px;
                        height: 25px;
                        background-position: 0 3px;
                        // margin-top: 5px;
                        text-align: center;
                        cursor: pointer;
                        letter-spacing: 2px;
                        line-height: 26px;
                   }
                   .activeLi{
                       background: url('../../assets/images/tab_zh2.png') no-repeat; 
                       background-position: 0 3px;
                   }
               }
                 // 富文本样式
                
           }
       }
       .test_answer{
           width:100%;
        //    flex:1;
        //    display:flex;
        //    flex-direction:column;
           text-align: left;
            ul{
               width:100%;
               margin:14px 0;
               li{
                   line-height: 1.5;
                    font-size: 14px;
                    font-family:'宋体';
                    overflow: hidden;
                    .contentSpan{
                        display: inline-block;
                        margin-right:5px;
                        p{
                            margin: 0 !important;
                        }
                    }
                    .span{
                        font-weight:bold;
                    }
               } 
            }
            .test_area{
                width:100%;
                height:100%;
                // background:#fff;
                textarea{
                    height:95%;
                    width:99%;
                    resize:none;
                    outline:none;
                    border:none;
                }
                .txtArea{
                    height:95%;
                    width:99%;
                    border:1px solid #eee;
                    overflow:auto;
                    background: white;
                }
            }
       }
       .helpDialog{
            width: 687px;
            visibility: visible;
            display: block;
            position: absolute;
            height: auto;
            left: 50%;
            top: 20px;
            z-index: 479;
            transform: translateX(-50%);
       }
       /* table 样式 */
        table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }
        table td,
        table th {
            text-indent: 0;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
            text-align: center;
            p {
            text-align: center;
            }
        }
        table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }
    }
</style>
